<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人简历</title>
		<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
		<!--<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />-->
		<link rel="stylesheet" type="text/css" href="css/resume.css">

		<!--<script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script>
		<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>-->
	</head>

	<body>
		<audio  id="myaudio" autoplay="autoplay">
			<source src="Hall Of Fame - The Script feat. will.i.am (Lyrics).mp3" type="audio/mp3"></source>
		</audio>
		<div class="swiper-container">
			<span class="iconfont icon-iconfontbiaozhunmoban01" id="iconfont"></span>
			<div class="swiper-wrapper">
				<div class="swiper-slide slide1 ">
					<div class="top ani"></div>
					<div class="ani bga1" swiper-animate-effect="playbga13">
						<img src="img/a1.png" />
						<div class="wza1 wz">个</div>
					</div>
					<div class="ani bga2" swiper-animate-effect="playbga24">
						<img src="img/a2.png" />
						<div class="wza2 wz">人</div>
					</div>
					<div class="ani bga3" swiper-animate-effect="playbga13">
						<img src="img/a3.png" />
						<div class="wza3 wz">简</div>
					</div>
					<div class="ani bga4" swiper-animate-effect="playbga24">
						<img src="img/a4.png" />
						<div class="wza4 wz">历</div>
					</div>
				</div>
				<div class="swiper-slide slide2">
					<div class="top ani"></div>
					<div class="ani bgb1" swiper-animate-effect="playbga13"><img src="img/b1.png" /></div>
					<div class="ani bgb2" swiper-animate-effect="playbga24"><img src="img/b2.png" /></div>
					<h3 class="ani" swiper-animate-effect="playcxt">基本信息</h3>
					<ul>
						<li class="ani" swiper-animate-effect="playli1">姓名:李文楷</li>
						<li class="ani" swiper-animate-effect="playli2">性别:男</li>
						<li class="ani" swiper-animate-effect="playli3">年龄:23</li>
						<li class="ani" swiper-animate-effect="playli4">手机:13530451602</li>
						<li class="ani" swiper-animate-effect="playli5">地址:深圳</li>
					</ul>
				</div>
				<div class="swiper-slide slide3">
					<div class="top ani"></div>
					<div class="ani bgc1" swiper-animate-effect="playbgc1"><img src="img/c1.png" /></div>
					<h3 class="ani" swiper-animate-effect="playch3">求职意向</h3>
					<div class="xt ani" swiper-animate-effect="playcxt"></div>
					<ul>
						<li class="ani" swiper-animate-effect="playcli1"></li>
						<li class="ani" swiper-animate-effect="playcli2"></li>
						<li class="ani" swiper-animate-effect="playcli3"></li>
						<li class="ani" swiper-animate-effect="playcli4"></li>
					</ul>
					<div class="ani bgc2 bgc" swiper-animate-effect="playbgc2">
						<img src="img/j2.png" />
						<div class="wzc2 wzc">Hybrid</div>
					</div>
					<div class="ani bgc3 bgc" swiper-animate-effect="playbgc3">
						<img src="img/j1.png" />
						<div class="wzc3 wzc">微信开发</div>
					</div>
					<div class="ani bgc4 bgc" swiper-animate-effect="playbgc4">
						<img src="img/j2.png" />
						<div class="wzc4 wzc">SPA开发</div>
					</div>
					<div class="ani bgc5 bgc" swiper-animate-effect="playbgc5">
						<img src="img/j1.png" />
						<div class="wzc5 wzc">PC端</div>
					</div>
				</div>
				<!--<div class="swiper-slide slide4">
					<div class="top ani"></div>
					<div class="ani bgd1" swiper-animate-effect="playbgc1"><img src="img/d1.png" /></div>
					<h3 class="ani" swiper-animate-effect="playch3">教育背景</h3>
					<ul>
						<li class="ani" swiper-animate-effect="playdli1">1997.09-2004.7 宜昌杨岔路小学</li>
						<li class="ani" swiper-animate-effect="playdli2">2004.9-2007.6 宜昌博文国际学校</li>
						<li class="ani" swiper-animate-effect="playdli3">2007.9-2010.6 宜昌葛洲坝中学</li>
						<li class="ani" swiper-animate-effect="playdli4">2010.9-2014.7 武汉湖北第二师范学院</li>
					</ul>
				</div>-->
				<div class="swiper-slide slide5">
					<div class="top ani"></div>
					<div class="bge1 ani" swiper-animate-effect="playbge1"><img src="img/e1.png" /></div>
					<div class="bge2 ani" swiper-animate-effect="playch3"><img src="img/e2.png" /></div>
					<h3 class="ani" swiper-animate-effect="playeh3">掌握技能</h3>
					<ul>
						<li>
							<span class="ani" swiper-animate-effect="playes1">HTML</span>
							<img src="img/e3.png" class="ani" swiper-animate-effect="playcxt" />
							<div class="ani" swiper-animate-effect="playem1"></div>
							<div class="ani" swiper-animate-effect="playem2"></div>
							<div class="ani" swiper-animate-effect="playem3"></div>
							<div class="ani" swiper-animate-effect="playem4"></div>
							<div class="ani" swiper-animate-effect="playem5"></div>
							<div class="ani" swiper-animate-effect="playem6"></div>
						</li>
						<li>
							<span class="ani" swiper-animate-effect="playes1">CSS</span>
							<img src="img/e3.png" class="ani" swiper-animate-effect="playcxt" />
							<div class="ani" swiper-animate-effect="playem1"></div>
							<div class="ani" swiper-animate-effect="playem2"></div>
							<div class="ani" swiper-animate-effect="playem3"></div>
							<div class="ani" swiper-animate-effect="playem4"></div>
							<div class="ani" swiper-animate-effect="playem5"></div>
							<div class="ani" swiper-animate-effect="playem6"></div>
						</li>
						<li>
							<span class="ani" swiper-animate-effect="playes1">Javascript</span>
							<img src="img/e3.png" class="ani" swiper-animate-effect="playcxt" />
							<div class="ani" swiper-animate-effect="playem1"></div>
							<div class="ani" swiper-animate-effect="playem2"></div>
							<div class="ani" swiper-animate-effect="playem3"></div>
							<div class="ani" swiper-animate-effect="playem4"></div>
							<div class="ani" swiper-animate-effect="playem5"></div>
						</li>
						<li>
							<span class="ani" swiper-animate-effect="playes1">JQuery</span>
							<img src="img/e3.png" class="ani" swiper-animate-effect="playcxt" />
							<div class="ani" swiper-animate-effect="playem1"></div>
							<div class="ani" swiper-animate-effect="playem2"></div>
							<div class="ani" swiper-animate-effect="playem3"></div>
							<div class="ani" swiper-animate-effect="playem4"></div>
							<div class="ani" swiper-animate-effect="playem5"></div>
						</li>
						<li>
							<span class="ani" swiper-animate-effect="playes1">sass/less</span>
							<img src="img/e3.png" class="ani" swiper-animate-effect="playcxt" />
							<div class="ani" swiper-animate-effect="playem1"></div>
							<div class="ani" swiper-animate-effect="playem2"></div>
							<div class="ani" swiper-animate-effect="playem3"></div>
							<div class="ani" swiper-animate-effect="playem4"></div>
							<div class="ani" swiper-animate-effect="playem5"></div>
						</li>
						<li>
							<span class="ani" swiper-animate-effect="playes1">seaJs</span>
							<img src="img/e3.png" class="ani" swiper-animate-effect="playcxt" />
							<div class="ani" swiper-animate-effect="playem1"></div>
							<div class="ani" swiper-animate-effect="playem2"></div>
							<div class="ani" swiper-animate-effect="playem3"></div>
							<div class="ani" swiper-animate-effect="playem4"></div>
						</li>
						<li>
							<span class="ani" swiper-animate-effect="playes1">Angular.js</span>
							<img src="img/e3.png" class="ani" swiper-animate-effect="playcxt" />
							<div class="ani" swiper-animate-effect="playem1"></div>
							<div class="ani" swiper-animate-effect="playem2"></div>
							<div class="ani" swiper-animate-effect="playem3"></div>
							<div class="ani" swiper-animate-effect="playem4"></div>
						</li>
						<li>
							<span class="ani" swiper-animate-effect="playes1">gulp</span>
							<img src="img/e3.png" class="ani" swiper-animate-effect="playcxt" />
							<div class="ani" swiper-animate-effect="playem1"></div>
							<div class="ani" swiper-animate-effect="playem2"></div>
							<div class="ani" swiper-animate-effect="playem3"></div>
							<div class="ani" swiper-animate-effect="playem4"></div>
						</li>						
						<li>
							<span class="ani" swiper-animate-effect="playes1">其他插件</span>
							<img src="img/e3.png" class="ani" swiper-animate-effect="playcxt" />
							<div class="ani" swiper-animate-effect="playem1"></div>
							<div class="ani" swiper-animate-effect="playem2"></div>
							<div class="ani" swiper-animate-effect="playem3"></div>
							<div class="ani" swiper-animate-effect="playem4"></div>
							<div class="ani" swiper-animate-effect="playem5"></div>
						</li>
					</ul>
				</div>
				<div class="swiper-slide slide6">
					<div class="top ani"></div>
					<div class="bgf1 ani" swiper-animate-effect="playch3"><img src="img/f1.png" /></div>
					<div class="bgf2 ani" swiper-animate-effect="playbgc1"><img src="img/f2.png" /></div>
					<h3 class="ani" swiper-animate-effect="playeh3">工作及项目经验</h3>
					<ul>
						<div class="ani st" swiper-animate-effect="playest"><img src="img/st.png"/></div>
						<li>
							<div class="fk fk1 ani"  swiper-animate-effect="playcli1">
								<svg class="" preserveAspectRatio="none" xml:space="preserve" enable-background="new 0 0 500 500.008" viewBox="0 0 500 500.008" height="100%" width="100%" y="0px" x="0px" version="1.1">
									<path style="fill: rgb(3, 3, 3);" d="M500,250c-138.069,0-250,111.933-250,250.008C250,361.935,138.071,250,0,250  c138.064,0,250-111.928,250-250C250,138.073,361.931,250,500,250z" fill="#08A1EF"></path>
								</svg>
							</div>
							<!--<img src="img/f3.png" class="ani" swiper-animate-effect="playdli1" />-->
							<p class="p1 ani" swiper-animate-effect="playdli1">
								2014.7-2016.8<br />北京超越无限信息技术有限公司
							</p>
						</li>
						<li>
							<div class="fk fk2 ani"  swiper-animate-effect="playcli1">
								<svg class="" preserveAspectRatio="none" xml:space="preserve" enable-background="new 0 0 500 500.008" viewBox="0 0 500 500.008" height="100%" width="100%" y="0px" x="0px" version="1.1">
									<path style="fill: rgb(3, 3, 3);" d="M500,250c-138.069,0-250,111.933-250,250.008C250,361.935,138.071,250,0,250  c138.064,0,250-111.928,250-250C250,138.073,361.931,250,500,250z" fill="#08A1EF"></path>
								</svg>
							</div>
							<!--<img src="img/f3.png" class="ani" swiper-animate-effect="playdli2" />-->
							<p class="p2 ani" swiper-animate-effect="playdli2">
								惠家有(PC端)<br />
								项目职责：页面布局，使用Ajax进行后台交互，首页商品详情页的js联调。
							</p>
						</li>
						<li>
							<div class="fk fk3 ani"  swiper-animate-effect="playcli1">
								<svg class="" preserveAspectRatio="none" xml:space="preserve" enable-background="new 0 0 500 500.008" viewBox="0 0 500 500.008" height="100%" width="100%" y="0px" x="0px" version="1.1">
									<path style="fill: rgb(3, 3, 3);" d="M500,250c-138.069,0-250,111.933-250,250.008C250,361.935,138.071,250,0,250  c138.064,0,250-111.928,250-250C250,138.073,361.931,250,500,250z" fill="#08A1EF"></path>
								</svg>
							</div>
							<!--<img src="img/f3.png" class="ani" swiper-animate-effect="playdli3" />-->
							<p class="p3 ani" swiper-animate-effect="playdli3">
								空色美术（WebApp+pc端）<br />
								项目职责：此项目为团队项目，本人负责页面布局，使用Ajax进行后台的交互，利用zepto和原生JS实现动态效果。
							</p>
						</li>
						<li>
							<div class="fk fk4 ani"  swiper-animate-effect="playcli1">
								<svg class="" preserveAspectRatio="none" xml:space="preserve" enable-background="new 0 0 500 500.008" viewBox="0 0 500 500.008" height="100%" width="100%" y="0px" x="0px" version="1.1">
									<path style="fill: rgb(3, 3, 3);" d="M500,250c-138.069,0-250,111.933-250,250.008C250,361.935,138.071,250,0,250  c138.064,0,250-111.928,250-250C250,138.073,361.931,250,500,250z" fill="#08A1EF"></path>
								</svg>
							</div>
							<!--<img src="img/f3.png" class="ani" swiper-animate-effect="playdli4" />-->
							<p class="p4 ani" swiper-animate-effect="playdli4">
								北海365（Hybird）<br />
								项目职责：首页气象实时数据更新，首页分类信息模块及二级页面弹性盒布局，首页热点推荐模块iScroll，手机调取扫描二维码。
							</p>
						</li>
					</ul>
				</div>
				<div class="swiper-slide slide7">
					<div class="top ani"></div>
					<div class="bgh1 ani" swiper-animate-effect="playch3"><img src="img/h1.png" /></div>
					<div class="bgh2 ani" swiper-animate-effect="playbgc1"><img src="img/h2.png" /></div>
					<h3 class="ani" swiper-animate-effect="playcxt">自我评价</h3>
					<div class="bgg1">
						<span class="ani" swiper-animate-effect="playcli2">开朗</span>
						<img src="img/g1.png" swiper-animate-effect="playbgg1" class="ani"/>
					</div>
					<div class="bgg2">
						<span class="ani" swiper-animate-effect="playcli3">热心</span>				
						<img src="img/g2.png" swiper-animate-effect="playbgg2" class="ani"/>
					</div>
					<div class="bgg3">
						<span class="ani" swiper-animate-effect="playcli1">反应快</span>
						<img src="img/g3.png" swiper-animate-effect="playbgg3" class="ani"/>
					</div>
					<div class="bgg4">
						<span class="ani" swiper-animate-effect="playcli5">能吃苦</span>
						<img src="img/g4.png" swiper-animate-effect="playbgg4" class="ani"/>
					</div>
					<div class="bgg5">
						<span class="ani" swiper-animate-effect="playcli4">成熟</span>
						<img src="img/g5.png" swiper-animate-effect="playbgg5" class="ani"/>
					</div>				
				</div>
				<div class="swiper-slide slide8">
					<!--<div class="top ani"></div>-->
					<div class="bgh1 ani" swiper-animate-effect="playch3"><img src="img/h1.png" /></div>
					<div class="bgh2 ani" swiper-animate-effect="playbgc1"><img src="img/h2.png" /></div>
					<h3 class="ani" swiper-animate-effect="playcxt">联系方式</h3>
					<div class="ewm ani" swiper-animate-effect="playewm"><img src="img/mmqrcode1472661233697.png"/></div>
					<ul>
						<li class="ani" swiper-animate-effect="playhl1">姓名：李文楷</li>
						<li class="ani" swiper-animate-effect="playhl2">电话：13530451602</li>
						<li class="ani" swiper-animate-effect="playhl3">QQ：592773593</li>
						<li class="ani" swiper-animate-effect="playhl4">邮箱：592773593@qq.com</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="js/sea.js"></script>
	<script type="text/javascript">
		seajs.use(["resume"],function (app) {
			app.init();
		})

//		$("#iconfont").on("touchstart", function() {
//			var status = $("#myaudio")[0].paused;
//			if(status) {
//				$("#myaudio")[0].play();
//				$(this).css("-webkit-animation", "rotate 2s infinite linear")
//			} else {
//				$("#myaudio")[0].pause();
//				$(this).css("-webkit-animation", "none")
//			}
//		})
//		var myswiper = new Swiper(".swiper-container", {
//			direction: 'vertical',
//			resistanceRatio: 0,
//			paginationClickable: true,
//			onInit: function(swiper) {
//				q.swiperAnimateCache(swiper);
//				q.swiperAnimate(swiper);
//			},
//			// //表示滑动结束的时候触发的回调函数
//			// // onSlideChangeStart:function(swiper){
//			// //      //swiper表示滑到当前页的slide
//			// //      //activeIndex 每一个slide的活动索引，不能用loop循环
//			// // },
//			onSlideChangeEnd: function(swiper) {
//				//previousIndex 表示滑动的前一页
//				q.swiperAnimate(swiper);
//			}
//		})
	</script>

</html>